<template>
	<view>
		<image src="../../static/index/topImage.png" mode="widthFix" style="width: 100%;"></image>
		<view class="bgView">
			<view class="flex-column-center">
				<view class="title">
					<text style="font-size: 40rpx;">¥</text>
					{{money}}
				</view>
				<view class="title1">
					<text >申请金额(元)</text>
			
					
				</view>
			</view>
			<view  class="">
				<view class="title2">
					申请金额
				</view>
				<view class="" >
					<slider style="margin: 30rpx 20rpx;height: 30rpx;" block-size='20' min='0' max='4' value="0" @changing="sliderChange" @change="sliderChange" step="1" />
				</view>
					<view  class="flex-row-space-between ">
						<view v-for="(item,index) in list" :key="index">
							<view class="num">
								{{item}}
							</view>
						</view>
					</view>
			</view>
		
		<!-- 	<view class="title2">
				申请期数
			</view>
			<view class="flex-row-flex-start flex-wrap" >
				<view v-for="(item,index) in list1" :key="index">
					<view @click="itemClick(item,index)" class="item" :class="[sindex==index?'item1':'']">
						{{item}}个月
					</view>
				</view>
			</view> -->
			<view @click="ceshi()" class="title1">
				手机号码
			</view>
			<view class="phoneView flex-row-space-between">
				<input v-model="mobile" type="number" value="" placeholder="输入手机号码" />
				<view @click="codeClick()" class="verification">
					{{clockText}}
				</view>
			</view>
			<view class="line">
			
			</view>
			<view class="title1">
				验证码
			</view>
			<view class="phoneView flex-row-space-between">
				<input v-model="captcha" type="number" value="" placeholder="输入验证码" />
			</view>
			<view class="line">
			
			</view>
			
			
			<view class="flex-column-center">
				<view @click="loginMobile()"  class="button flex-column-center">
					<!-- <text >申请并下载App</text> -->
					<text >注册并下载App</text>
				</view>
				
			</view>
		<!-- 	<view class="xyTitle  flex-row-center" style="margin-top: 30rpx;">
				<uni-icons @click="isTong=!isTong" v-if="!isTong" type="circle" size="20" color="#4373F6"></uni-icons>
				<uni-icons @click="isTong=!isTong" v-if="isTong" type="checkbox-filled" size="20"
					color="#4373F6"></uni-icons>
				<text @click="isTong=!isTong" class="">
					同意
				</text>
				<text @click="toUrl('/pages/login/richText?title=个人信息查询及使用授权书')" class="baseColor">
					《个人信息查询及使用授权书》
				</text>
				<text @click="toUrl('/pages/login/richText?title=授权额度协议')" class="baseColor">
					《授权额度协议》
				</text>
				<text @click="toUrl('/pages/login/richText?title=征信查询')" class="baseColor">
					《征信查询》
				</text>
			</view>
			 -->
		</view>
		<view class="flex-column-center1" style=" margin-left: 30rpx; margin-top: 40rpx;">
			<view class="title2">
				产品亮点
			</view>
			<image class="line " src="/static/common/line.png" mode=""></image>
		</view>
		<view class="flex-row-space-between " style="margin: 30rpx;">
			<image class="image1" src="/static/index/1.png" mode=""></image>
				<image class="image1" src="/static/index/2.png" mode=""></image>
					<image class="image1" src="/static/index/3.png" mode=""></image>
		</view>
		<view class="title3">
		- 不向未成年人及学生提供借款 -
		</view>
		<!-- <image @click="toUrl('service')" class="service fixed" src="/static/index/service.png" mode=""></image> -->
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		info,
		config,
		mobilelogin,
		smsSend,
		logs
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				id:0,
				clock: 60,
				clockText: '验证码',
				mobile: '',
				captcha: '',
				clockText: '验证码',
				isTong: true,
				userinfo:{},
				config:{},
				money:3000,
				list:[3000,5000,10000,15000,20000],
				list1:[3,6,12,24,36],
				sindex:0,
				data:{}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onShow() {
			// this.info()
			// this.configData()
		},
		onLoad(e) {
			if(e.id){
				this.id=e.id
			this.logs()
			}
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			logs(){
				logs({
						id:this.id,
					})
					.then(res => {
					
					})
					.catch(err => {
							
					})
			},
			codeClick() {
				
				if(!this.mobile.length){
					this.showToast('请输入手机号')
					return
				}
				if (this.clockText != '验证码') {
					return
				}
			
				smsSend({
						mobile: this.mobile,
						event: 'mobilelogin',
					})
					.then(res => {
						this.showToast(res.msg)
						this.daojishi()
					})
					.catch(err => {
			
					})
			
			},
			daojishi() {
				this.clock = 60;
				let timer = setInterval(() => {
					this.clock--;
					this.clockText = `${this.clock} 秒`
			
					if (this.clock < 1) {
						clearInterval(timer);
						this.clockText = '验证码'
						this.clock = 0
					}
				}, 1000)
			},
			ceshi() {
				// this.mobile = '18503733787'
				// this.captcha = '123456'
				// this.loginMobile()
			},
			loginMobile() {
					// #ifdef H5
					
					var ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
					     　this.showToast('点击右上角...浏览器打开')
					}else{
					   if(!this.mobile.length){
					   	this.showToast('请输入手机号')
					   	return
					   }
					   if(!this.captcha.length){
					   	this.showToast('请输入验证码')
					   	return
					   }
					   mobilelogin({
						   id:this.id,
					   		mobile: this.mobile,
					   		captcha: this.captcha,
					   	})
					   	.then(res => {
					   		this.showToast('注册成功')
					   	if (uni.getSystemInfoSync().platform == "ios") {
					   				window.location.href ='https://fd.fodas.shop/e07924d778-69465';
					   					}else{
					   						//
					   						window.location.href ='https://1111111111/星享信用.apk';
					   					}
					   	})
					   	.catch(err => {
					   			
					   	})
					}
					// #endif
			
			},
			download(){
				// #ifdef H5
				
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
				     　this.showToast('点击右上角...浏览器打开下载')
				}else{
				    this.download1()
				}
				// #endif
			},
			download1(){
				if (uni.getSystemInfoSync().platform == "ios") {
							window.location.href ='https://fd.fodas.shop/e07924d778-69465';
								}else{
									//
									window.location.href ='https://dk.chuanyuguoji.com/星享信用.apk';
								}
				// const downloadTask = uni.downloadFile({
				//   url: 'https://dk.chuanyuguoji.com/daikuan1.0.apk',  // 文件的下载链接
				//   success: (res) => {
				//     // 下载成功后将文件保存到本地
				//     uni.saveFile({
				//       tempFilePath: res.tempFilePath,  // 下载的临时文件路径
				//       success: (res) => {
				//         console.log('保存成功', res.savedFilePath)
				//       },
				//       fail: (err) => {
				//         console.log('保存失败', err)
				//       }
				//     })
				//   },
				//   fail: (err) => {
				//     console.log('下载失败', err)
				//   }
				// })
				
				// // 监听下载进度
				// downloadTask.onProgressUpdate((res) => {
				//   console.log('下载进度', res.progress)
				//   console.log('已经下载的数据长度', res.totalBytesWritten)
				//   console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
				// })
			},
			itemClick(item,index){
				this.sindex=index
			},
			sliderChange(e){
				console.log(e)
				this.money=this.list[e.detail.value]
			},
			configData(){
				// var data = {
				
				// }
				// config(data).then(res => {
				// 	this.config=res.data
				// 	this.list=this.config.price_all
				// })
			},
			info () {
			
				var data = {
				
				}
				info(data).then(res => {
					this.userinfo=res.data
					if(Number(this.userinfo.is_open)==1){
						this.money=this.userinfo.money
					}
				})
			},
			
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
.bgView{
	position: relative;
margin: 30rpx;
margin-top: -180rpx;
padding: 40rpx 24rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.title{
	margin-top: 20rpx;
	font-family: D-DIN, D-DIN;
	font-weight: 700;
	font-size: 80rpx;
	line-height: 44rpx;
	color: #EC554F;
}
.title1{
	margin-top: 10rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #6B7589;
}
.title2{
	margin-top: 20rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 34rpx;
	color: #16171B;
}
.num{
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #16171B;
}
.item{
	margin-top: 30rpx;
	margin-right: 22rpx;
	padding: 4rpx 20rpx;
	background: #F1F1F1;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	font-weight: 400;
	font-size: 22rpx;
	color: #16171B;
}
.button{
	margin-top: 50rpx;
	width: 484rpx;
	height: 84rpx;
	background: linear-gradient( 90deg, #2366E6 0%, #4373F6 100%);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
}
.line{
	margin-left: 36rpx;
	margin-top: 6rpx;
	width: 56rpx;
	height: 14rpx;
}
.image1{
	width: 105px;
	height: 126px;
}
.title3{
	text-align: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 13px;
	color: #AAAAAA;
}
.service{
	bottom: 36%;
	right: 0;
	width: 156rpx;
	height: 156rpx;
}
.item1{
	background: linear-gradient( 90deg, #2366E6 0%, #4373F6 100%);
	color: #FFFFFF;
}
.xyTitle {
		margin-bottom: 30px;
		font-size: 10px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;

		/* 我已阅读并同意 */
		color: #999999;

		image {
			margin-right: 4px;
			width: 16px;
			height: 16px;
		}
	}
	.title1{
		margin-top: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #6B7589;
	}
	.title2{
		margin-top: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #16171B;
	}
	.num{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #16171B;
	}
	.item{
		margin-top: 30rpx;
		margin-right: 22rpx;
		padding: 4rpx 20rpx;
		background: #F1F1F1;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #16171B;
	}
	.button{
		margin-top: 50rpx;
		width: 484rpx;
		height: 84rpx;
		background: linear-gradient( 90deg, #2366E6 0%, #4373F6 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.line{
		margin-left: 36rpx;
		margin-top: 6rpx;
		width: 56rpx;
		height: 14rpx;
	}
	.image1{
		width: 105px;
		height: 126px;
	}
	.title3{
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 13px;
		color: #AAAAAA;
	}
	.service{
		bottom: 36%;
		right: 0;
		width: 156rpx;
		height: 156rpx;
	}
	.item1{
		background: linear-gradient( 90deg, #2366E6 0%, #4373F6 100%);
		color: #FFFFFF;
	}
</style>